<template>
	<view class="result" :class="[activeClass[activeIndex]]">
		<u-navbar title="评测结果" class="navHeader noFixed" title-size="36" title-color="#333333"></u-navbar>
		
		<view class="score">
			<view class="score-inner" :style="{
					color: tagColor[activeIndex]
				}">
				<text class="number">{{ selectScore }}</text>
				<text class="tips">指标总分</text>
			</view>
		</view>
		<view class="score-result">
			评测结果:<u-tag :text="level[activeIndex]" mode="light" shape="circle" :border-color="tagColor[activeIndex]" :color="tagColor[activeIndex]" />
		</view>
		
		<view class="btn-group">
			<u-button shape="circle" :custom-style="start" @click="restart">继续评测</u-button>
			<u-button shape="circle" :custom-style="back" plain @click="goHome">返回首页</u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			start: {
				background: '#00A1F2 !important',
				color: '#fff',
			},
			back: {
				background: '#fff !important',
				borderColor: '#00A1F2',
				color: '#00A1F2',
			},
			btnDisable: true,
			tagColor: ['#00A1F2', '#01D3A5', '#FF7B02', '#FF6969'],
			activeIndex: 0,
			activeClass: ['v1', 'v2', 'v3', 'v4'],
			selectScore: 0,
			level: ['优', '良', '中', '差'],
		};
	},
	onLoad(options) {
		let score = options.score
		this.selectScore = score
		console.log(score)
		this.activeIndex = this.resultFormat(score)
	},
	methods: {
		goHome() {
			this.$u.route({
				type: 'navigateBack',
				url: '/pages/index'
			})
		},
		// 结果格式化
		resultFormat(score) {
			// 总分≥80
			// 65≤总分＜80
			// 50≤总分＜65
			// 总分＜50
			if(score >= 80) {
				return 0
			} else if(score < 80 && score >= 65) {
				return 1
			} else if(score < 65 && score >= 50) {
				return 2
			} else {
				return 3
			}
		},
		restart() {
			this.$u.route({
				type: 'redirectTo',
				url: '/pages/scoringIndex'
			})
		}
	}
}
</script>

<style lang="less" scoped>
.navHeader {
	/deep/.u-title {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&.noFixed {
		// position: absolute;
		/deep/.u-title, /deep/.uicon-nav-back {
			color: #FFFFFF !important;
		}
		/deep/.u-navbar {
			background-color: transparent !important;
		}
	}
}
.result {
	min-height: 100vh;
	&.v1 {
		background: url('../static/1.png') no-repeat top center;
		background-size: contain;
	}
	&.v2 {
		background: url('../static/2.png') no-repeat top center;
		background-size: contain;
	}
	&.v3 {
		background: url('../static/3.png') no-repeat top center;
		background-size: contain;
	}
	&.v4 {
		background: url('../static/4.png') no-repeat top center;
		background-size: contain;
	}
}
.score {
	margin: 48rpx auto;
	width: 320rpx;
	height: 320rpx;
	border-radius: 50%;
	border: 4rpx dashed #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
	.score-inner {
		background-color: #fff;
		border-radius: 50%;
		width: 280rpx;
		height: 280rpx;
		font-size: 112rpx;
		color: #00A1F2;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		.number {
			margin-top: 50rpx;
		}
		.tips {
			font-size: 28rpx;
			font-weight: 400;
			line-height: 44rpx;
			opacity: 0.6;
		}
	}
}
.score-result {
	font-size: 32rpx;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	/deep/.u-size-default {
		padding: 12rpx 30rpx;
		margin-left: 12rpx;
		font-size: 32rpx;
	}
}
.btn-group {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 280rpx 48rpx 0;
	u-button {
		width: 48%;
	}
	/deep/.u-btn {
		font-size: 36rpx;
		height: 96rpx;
		line-height: 96rpx;
	}
}
</style>
